<template>
  <div id="myPurchase-detail">
    <div class="filter-box">
      <div class="top-box">
          <div class="box-title">基本信息</div>
      </div>
      <a-row class="info">
        <a-col :span="8">
            <span class="info-left">所属组织</span>
            <a-input
              v-model="form.orgName"
              placeholder="请输入银行编码"
              style="width: 250px;"
              disabled
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">档案编号</span>
            <a-input
              v-model="form.code"
              placeholder="请输入银行编码"
              style="width: 250px;"
              disabled
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">档案名称</span>
            <a-input
              v-model="form.name"
              placeholder="请输入银行编码"
              style="width: 250px;"
              disabled
            />
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
                <span class="info-left">启用状态</span>
                <a-select
                v-model="form.enablestate"
                style="width: 250px;"
                :showSearch="true"
                allowClear
                disabled
                placeholder="请选择状态">
                <a-select-option
                  :value="2"
                  >{{"启用"}}
                </a-select-option>
                <a-select-option
                  :value="3"
                  >{{"禁用"}}
                </a-select-option>
                </a-select>
        </a-col>
      </a-row>
    </div>
    <div class="container">
      <div class="container-title">档案明细</div>
          <DataTable
        rowKey="phid"
        :tableData="Data"
        :tableColumn="tableColumn"
      />

    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Ground extends Vue {
  form: any = {
    orgName: undefined,
    code: undefined,
    name: undefined,
    enablestate: undefined
  }
  Data: any = []// 发货记录
  tableColumn: any = {
    rowno: {
      label: '行号',
      // slot: true,
      width: 80
    },
    code: {
      label: '编码',
      width: 200
    },
    name: {
      label: '名称',
      width: 200
    },
    memo: {
      label: '备注',
      width: 200
    }
  }

  get defdocId () {
    return this.$route.query.phid
  }


  init () {
    this.getDetail()
  }
  getDetail () {
    let data = {
      phid: this.defdocId,
      size: 9999,
      page: 1
    }
    this.$api.defdocDetaillistFetch(data).then((res: any) => {
      this.form = res.data.header
      this.Data = res.data.pageInfoList.list
    });
  }
}
</script>

<style lang="scss" scoped>
#myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;

        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }

}
.model-icon{
  color: green;

  .icon{
    font-size: 50px;
  }
}
.model-text{
  font-weight: 700;
  font-size: 16px;
}
.container{
  padding-bottom: 30px;
  border-bottom: 20px solid #ebf0f5;
  height: 450px;
  overflow-x: hidden;
	overflow-y: scroll;
}
.container::-webkit-scrollbar{
	display: none;
}
.delivery-record{
  margin: 0 10px;
  padding-left: 20px;
  border-left: 1px solid #4286ff;
  position: relative;
  padding-top: 30px;
  &:nth-child(2){
    padding-top: 0;
  }
  .circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #4286ff;
    background-color: #4286ff;
    position: absolute;
    left: -10px;
  }
  .record-info{
    margin-bottom: 15px;

  }
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
